<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>Hole</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            background: url("http://www.jq22.com/tp/73eb5179-2cea-485e-b09c-7972a05c2255.jpg") no-repeat left top;
            background-size: cover;
            overflow: hidden;
        }

        .hole {
            margin: -150px 0 0 -150px;
            width: 300px;
            height: 300px;
            box-shadow: 0 0 0 9999em #000;
            border-radius: 50%;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            position: fixed;
            transition: width .5s ease-in-out, height .5s ease-in-out, margin .5s ease-in-out;
        }

        .hole:after {
            content: "";
            display: block;
            margin: -1% 0 0 -1%;
            width: 102%;
            height: 102%;
            box-shadow: inset 0 0 50px 50px #000;
            border-radius: 50%;
        }

        .hole:active {
            margin: -250px 0 0 -250px;
            width: 500px;
            height: 500px;
            transition: width 1s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out;
        }

    </style>
</head>
<body>

<div class="hole"></div>

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
    $(document).on("mousemove", function(event) {
        $(".hole").css({
            "top": event.pageY,
            "left": event.pageX
        });
    });
</script>
</body>
</html>